<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人信息</title>
    <!--引入vue-->
    <script src="../../js/vue.js"></script>
    <!--引入Element-->
    <script src="../../js/index.js"></script>
    <link rel="stylesheet" href="../../css/index.css">
    <!--引入axios-->
    <script src="../../js/axios.min.js"></script>
    <script src="../../js/request.js"></script>
</head>
<body>
<div id="app">
    <div style="width: 500px;margin: 50px auto;">
        <el-form ref="formRef" :model="userInfo" label-width="80px" :rules="rules">
            <el-form-item label="用户名" prop="username">
                <el-input v-model="userInfo.username" placeholder="请输入用户名" :disabled="inputDisabled"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
                <el-select v-model="userInfo.sex" placeholder="--性别--" :disabled="inputDisabled">
                    <el-option label="男" value="男"></el-option>
                    <el-option label="女" value="女"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="生日" prop="birth">
                <el-date-picker
                        v-model="userInfo.birth"
                        align="right"
                        type="date"
                        :disabled="inputDisabled"
                        placeholder="选择日期"
                        :picker-options="pickerOptions">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="地址" prop="address">
                <el-input v-model="userInfo.address" placeholder="请输入地址"
                          :disabled="inputDisabled"></el-input>
            </el-form-item>
            <el-form-item label="电话" prop="phone">
                <el-input v-model="userInfo.phone" placeholder="请输入电话号码" :disabled="inputDisabled"></el-input>
            </el-form-item>
        </el-form>
        <div style="display: flex;justify-content: space-evenly;margin-top: 8px;width: 500px">
            <el-button type="primary" @click="update">{{buttonText}}</el-button>
            <el-button @click="updateUserInfo" :disabled="inputDisabled">确定</el-button>
        </div>
    </div>

</div>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                //输入框状态
                inputDisabled: true,
                //按钮文本
                buttonText: "修改",
                //用户信息
                userInfo: {},
                //备份用户信息
                userInfoBackup: {},
                //表单校验规则
                rules: {
                    username: [
                        {required: true, message: '请填写所有必要字段', trigger: 'blur'}

                    ],
                    sex: [
                        {required: true, message: '请填写所有必要字段', trigger: 'blur'}

                    ],
                    birth: [
                        {required: true, message: '请填写所有必要字段', trigger: 'blur'}

                    ],
                    address: [
                        {required: true, message: '请填写所有必要字段', trigger: 'blur'}

                    ],
                    phone: [
                        {required: true, message: '请填写所有必要字段', trigger: 'blur'}

                    ],
                    flag: [
                        {required: true, message: '请填写所有必要字段', trigger: 'blur'}

                    ],
                },
                //日期选择器
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    },
                },
            }
        },
        created() {
            this.getUserInfo();
        },
        methods: {
            //获取用户信息
            async getUserInfo() {
                await $axios.get("/user?m=getUsrInfo").then(res => {
                    if (res.code === 1) {
                        this.userInfo = res.data;
                    } else {
                        this.$message.error(res.msg);
                    }
                })
            },
            //修改用户信息
            update() {
                if (this.inputDisabled) {
                    //备份当前用户的信息
                    this.userInfoBackup = {...this.userInfo}
                    // 修改输入框状态
                    this.inputDisabled = false;
                    this.buttonText = "取消";
                } else {
                    //重置表单验证结果
                    this.$refs.formRef.resetFields();
                    //回滚用户信息
                    this.userInfo = {...this.userInfoBackup}
                    //恢复按钮状态 禁用输入框
                    this.inputDisabled = true;
                    this.buttonText = "修改";
                }
            },
            //确定修改按钮点击事件
            updateUserInfo() {
                this.$refs.formRef.validate((valid) => {
                    if (valid) {
                        $axios.post("/user?m=updateUserInfo", this.userInfo).then(res => {
                            if (res.code === 1) {
                                this.$message.success(res.msg);
                                //恢复按钮状态
                                this.inputDisabled = true;
                                //恢复按钮文本
                                this.buttonText = "修改";
                                this.getUserInfo();
                            } else {
                                this.$message.error(res.msg);
                            }
                        })
                    }
                })
            },
        }
    })
</script>

</body>
</html>